<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>线路图页面</title>

    <link rel="stylesheet" href="nav_style.css">
    <link rel="stylesheet" href="line.css">


</head>
<body>
    <h1 style="text-align: center;">青岛旅游</h1>       
    <br>
    <h3 style="text-align: center;">青岛旅游网欢迎您</h3>
    <div class="nav">
        <ul class="ullist">
            <li class="libt">
                <a href="#">网站首页</a>
            </li>

            <li class="libt">
                <a href="#">景点</a>
                <ul class="droplist">
                    <li><a href="#">下拉1</a></li>
                    <li><a href="#">下拉1</a></li>
                    <li><a href="#">下拉1</a></li>
                </ul>
            </li>

            <li class="libt">
                <a href="#">酒店</a>
                <ul class="droplist">
                    <li><a href="#">下拉1</a></li>
                    <li><a href="#">下拉1</a></li>
                    <li><a href="#">下拉1</a></li>
                </ul>
            </li>

            <li class="libt">
                <a href="#">路线</a>
                <ul class="droplist">
                    <li><a href="#">下拉1</a></li>
                    <li><a href="#">下拉1</a></li>
                    <li><a href="#">下拉1</a></li>
                </ul>
            </li>

            <li class="libt">
                <a href="#">搜索</a>
            </li>

            <li class="libt">
                <a href="#">个人中心</a>
            </li>

            <li class="libt">
                <a href="#">注册登录</a>
            </li>

            <li class="libt">
                <a href="#">关于我们</a>
            </li>
        </ul>
    </div> 
    <!-- 统一导航栏 -->

    <div>
        <h2>青岛地铁</h2>
    </div>
    <br>
    <div>
        <img id="image1" src="underground-line.jpg" class="image">
    </div>
    <div class="all">
        <div class="little">
            <h3>出行</h3>
            请输入您的出发地<div></div>
            <input type="text" name="begin"><div></div>
            请输入您的目的地<div></div>
            <input type="text" name="end" >
            <button id="loginBtn">确定</button>
        </div>
    
    </div>

    <script src="jquery-1.8.3.js"></script>  
    <script>
        $(document).ready(function() {  
        $("#image1").click(function() {  
            // 切换图片的放大和缩小状态  
            if ($(this).css("width") == "600px") {  
                $(this).css({  
                    "width": "1200px",  
                    "height": "auto"  
                });  
            } else {  
                $(this).css({  
                    "width": "600px",  
                    "height": "auto"  
                });  
            }  
        });  
    });
    </script>
</body>
</html>